<template>
  <n-page-header
    subtitle="账单管理"
    class="manage-detail"
    @back="handleBack"
  >
    <div class="manage-detail__container">
      <n-form
        class="manage-detail__form"
        :model="form"
      >
        <n-form-item label="账单名称">
          <n-input
            v-model:value="form.name"
            placeholder="请输入账单名称"
          />
        </n-form-item>
        <n-form-item label="账单备注">
          <n-input
            v-model:value="form.remark"
            placeholder="请输入账单备注"
            type="textarea"
          />
        </n-form-item>
        <n-form-item
          v-if="id !== '0'"
          label="已有成员"
        >
          <n-flex
            v-for="(item, index) in form.userList"
            :key="index"
            vertical
            align="center"
            style="width: 60px"
          >
            <n-avatar
              round
              size="small"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <span>{{ item.username }}</span>
          </n-flex>
        </n-form-item>
        <n-form-item label="成员管理">
          <n-flex vertical>
            <n-input
              placeholder="成员账号/昵称"
              clearable
              :on-input="handleInput"
            >
              <template #suffix>
                <n-icon :component="Search" />
              </template>
            </n-input>
            <template v-if="filterUserList.length">
              <n-flex
                v-for="(item, index) in filterUserList"
                :key="index"
                vertical
                align="center"
                style="width: 60px"
              >
                <n-avatar
                  round
                  size="small"
                  src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <span>{{ item.username }}</span>
              </n-flex>
            </template>
            <n-empty
              v-else
              description="暂无成员"
            />
          </n-flex>
        </n-form-item>
      </n-form>
    </div>
    <template #footer>
      <n-flex
        justify="center"
        class="manage-detail__footer"
      >
        <n-button @click="handleBack">取消</n-button>
        <n-button
          type="primary"
          @click="handleSubmit"
          >保存</n-button
        >
      </n-flex>
    </template>
  </n-page-header>
</template>

<script lang="ts" setup>
  import { Search } from '@vicons/ionicons5'
  import { debounce } from 'lodash'
  const route = useRoute()
  const router = useRouter()

  const id = route.params.id
  const form = ref({
    name: '',
    remark: '',
    userList: [] as any[]
  })

  function handleBack() {
    router.back()
  }
  // 获取账单信息
  function getBillInfo() {
    http.get(`bill/manage/${id}`).then(res => {
      form.value = res.data
    })
  }

  // 提交
  function handleSubmit() {
    http.post('bill/manage', { ...form.value }).then(() => {
      $message.success('添加账单成功！')
      handleBack()
    })
  }

  const filterUserList = ref<any[]>([])

  const handleInput = debounce((value: string) => {
    if (!value) return (filterUserList.value = [])
    http.get('bill/manage/user', { name: value }).then(res => {
      filterUserList.value = res.data
    })
  }, 500)

  const { $message } = useFastNaive()
  if (id !== '0') getBillInfo()
</script>

<style scoped lang="scss">
  .manage-detail {
    background-color: #fff;
    padding-top: 16px;
    height: calc(100vh - 78px);
    position: relative;
    &__container {
      padding: 12px;
    }
    &__form {
      max-width: 500px;
    }
    &__footer {
      position: absolute;
      bottom: 12px;
      left: 250px;
      transform: translateX(-50%);
    }
  }
</style>
